// import styled from "styled-components";

import styled from "styled-components";

import btnL from "../../../../assets/image/LaneMonitoring/btnL.png";
import btnG from "../../../../assets/image/LaneMonitoring/btnG.png";
import bigbtn from "../../../../assets/image/LaneMonitoring/bigBtn.png";
import bigbtn2 from "../../../../assets/image/LaneMonitoring/bigBtn2.png";
import smallBG from "../../../../assets/image/LaneMonitoring/smallBG.png";
// import videoBg from " ../../../../assets/image/LaneMonitoring/videoBg.png";
import unactive from "../../../../assets/image/LaneMonitoring/graySwitch.png";
import active from "../../../../assets/image/LaneMonitoring/lightSwitch.png";
import dizhuo2 from "../../../../assets/image/LaneMonitoring/dizuo2.png";
import inputBg from "../../../../assets/image/LaneMonitoring/input.png";
import lastSmallBG from "../../../../assets/image/LaneMonitoring/lastsmallBG.png";
import videoBg from "../../../../assets/image/LaneMonitoring/videoBg.png";

export const NeirongCenterBox = styled.div`
  /* width: 100%; */
  padding: 1rem;
  box-sizing: border-box;
  .cb_center_bottom{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }
  .cb_top {
    width: 86.2rem;
    height: 18rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .yyz-bot {
      width: 42rem;
      height: 18rem;
      background: url(${smallBG}) no-repeat;
      background-size: 100% 100%;
      .title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 26.49%;
        font-size: 2rem;
        margin-left: 5.5rem;
        font-weight: bold;
        line-height: 200%;
        .text-title {
          color: #ffffff;
          background: linear-gradient(
            0deg,
            #79c5ff 0%,
            #ffffff 59.8388671875%,
            #ffffff 100%
          );
          background-clip: text;
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
        }
        .switchBox {
          width: 10rem;
          height: 98%;
          display: flex;
          align-items: center;
          justify-content: space-around;
          margin-right: 2rem;
          transform: translateY(1px);
          .dun {
            font-size: 1.6rem;
            cursor: pointer;
            width: 4.4rem;
            height: 4rem;
            text-align: center;
          }
          .active {
            background: url(${active}) no-repeat;
            background-size: 100% 100%;
            color: #ffffff;
          }
          .unactive {
            background: url(${unactive}) no-repeat;
            background-size: 100% 100%;
            color: #5c6e7f;
          }
        }
      }
      .yyz-content {
        width: 39.5rem;
        height: 14.2rem;
        display: flex;
        justify-content: space-between;
        .yyz-item-one {
          width: 12rem;
          height: 8.6rem;
          font-size: 2rem;
          text-align: center;
          background: url(${dizhuo2}) no-repeat;
          background-size: 100% 100%;
          margin: 1rem 3rem 0rem 3rem;
          position: relative;
          .yyz-title {
            font-size: 1.2rem;
            color: #92b2d0;
            position: absolute;
            top: -0.5rem;
            left: 50%;
            transform: translateX(-50%);
          }
          .yyz-value {
            width: 100%;
            font-size: 2.8rem;
            font-weight: bold;
            color: #fff;
            background: linear-gradient(0deg, #ffffff 0%, #01befc 100%);
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            position: absolute;
            top: 1rem;
            left: 50%;
            transform: translateX(-50%);
          }
        }
        .yyz-item {
          width: 55%;
          height: 50%;

          .yyz-title {
            font-size: 1.4rem;
            color: #92b2d0;
            margin: 0.5rem 2rem 1rem 0.3rem;
          }
          .inputBox {
            width: 18rem;
            height: 4.4rem;
            background: url(${inputBg}) no-repeat;
            background-size: 100% 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .inputLeft {
              width: 11rem;
              background: none;
              border: none;
              outline: none;
              color: #5697cc;
            }
            .inputLeft::placeholder {
              color: #5697cc;
            }
            .inputRight {
              width: 6rem;
              font-size: 1.4rem;
              color: #fff;
              text-align: center;
              cursor: pointer;
            }
          }
        }
      }
    }
    .cb_top_yyz_pressure {
      width: 42rem;
      height: 18rem;
      background: url(${smallBG}) no-repeat;
      background-size: 100% 100%;
      .btn-box {
        margin-top: 1.5rem;
        width: 90%;
        height: 35%;
        margin-left: 2rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        align-content: space-between;
        flex-wrap: wrap;
        font-size: 1.6rem;
        .bigbtn {
          width: 18rem;
          height: 4rem;
          background: url(${bigbtn}) no-repeat;
          background-size: 100% 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          color: #fdffff;
        }
        .bigbtn:hover {
          background: url(${bigbtn2}) no-repeat;
          background-size: 100% 100%;
        }
      }
      .xinhao_box {
        width: 90%;
        height: 20%;
        margin-left: 2rem;
        display: flex;
        align-items: center;
        justify-content: space-around;
        font-size: 1.6rem;
        div {
          flex: 1;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-right: 0.8rem;
          .xinhao {
            width: 1.4rem;
            height: 1.4rem;
            margin-right: 1rem;
            border-radius: 50%;
          }
          .bg-green {
            background-color: #14e328;
            box-shadow: 0px 0px 5px 0px rgba(57, 243, 75, 0.5);
          }
          .bg-gray {
            background-color: #7e8c9e;
          }
          .bg-red {
            background-color: #e31414;
            box-shadow: 0px 0px 5px 0px rgba(243, 57, 57, 0.5);
          }
          .bg-orange {
            background-color: #e35618;
          }
          .bg-blue {
            background-color: #14bee3;
            box-shadow: 0px 0px 5px 0px rgba(20, 190, 227, 0.5);
          }
          .text-orange {
            color: #e35618;
          }
          .text-green {
            color: #14e328;
          }
          .text-gray {
            color: #7e8c9e;
          }
          .text-red {
            color: #e31414;
          }
          .text-blue {
            color: #14bee3;
          }
        }
      }
      .title {
        height: 4rem;
        font-size: 2rem;
        margin-left: 5.5rem;
        font-weight: bold;
        line-height: 200%;
        color: #ffffff;
        background: linear-gradient(
          0deg,
          #79c5ff 0%,
          #ffffff 59.8388671875%,
          #ffffff 100%
        );
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    }
  }
  .cb_bottom {
    width: 85.9rem;
    height: 18.1rem;
    background: url(${smallBG}) no-repeat;
    background-size: 100% 100%;
    .title {
      height: 22.98%;
      font-size: 2rem;
      margin-left: 5.5rem;
      font-weight: bold;
      line-height: 200%;
      color: #ffffff;
      background: linear-gradient(
        0deg,
        #79c5ff 0%,
        #ffffff 59.8388671875%,
        #ffffff 100%
      );
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      display: flex;
      align-items: center;
    }
    .xinhao_box {
      width: 90%;
      height: 20%;
      margin-left: 2rem;
      display: flex;
      align-items: center;
      justify-content: space-around;
      font-size: 1.6rem;
      div {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 0.8rem;
        .xinhao {
          width: 1.4rem;
          height: 1.4rem;
          margin-right: 1rem;
          border-radius: 50%;
        }
        .bg-green {
          background-color: #14e328;
          box-shadow: 0px 0px 5px 0px rgba(57, 243, 75, 0.5);
        }
        .bg-gray {
          background-color: #7e8c9e;
        }
        .bg-red {
          background-color: #e31414;
          box-shadow: 0px 0px 5px 0px rgba(243, 57, 57, 0.5);
        }
        .bg-orange {
          background-color: #e35618;
        }
        .bg-blue {
          background-color: #14bee3;
          box-shadow: 0px 0px 5px 0px rgba(20, 190, 227, 0.5);
        }
        .text-orange {
          color: #e35618;
        }
        .text-green {
          color: #14e328;
        }
        .text-gray {
          color: #7e8c9e;
        }
        .text-red {
          color: #e31414;
        }
        .text-blue {
          color: #14bee3;
        }
      }
    }
    .btn-box {
      margin-top: 1.5rem;
      width: 90%;
      height: 35%;
      margin-left: 2rem;
      display: flex;
      align-items: center;
      justify-content: space-between;

      font-size: 1.6rem;
      .bigbtn {
        width: 10.8rem;
        height: 4rem;
        background: url(${bigbtn}) no-repeat;
        background-size: 100% 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        color: #fdffff;
      }
      .bigbtn:hover {
        background: url(${bigbtn2}) no-repeat;
        background-size: 100% 100%;
      }
      .btn_qiehuan {
        display: flex;

        align-items: center;
        justify-content: center;
        font-family: MiSans;
        font-weight: 400;
        font-size: 1.6rem;
        color: #92b2d0;
      }
    }
  }
`;
